<!--安全日志查看_列表查看-->
<script setup>
import axios from 'axios';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from "vue";
import {download, getStationList} from '../utils/index.js'
import OperaHeader from '@/components/OperaHeader.vue';
import StationSelector from '@/components/StationSelector.vue';
import MyDatePicker from '../components/MyDatePicker'
var role = localStorage.getItem('role')
var belong = localStorage.getItem('belong')
var dateValue = ref([])
var lastPage = ref(0) //最后一页，用于分页条
var currentPage=ref(1) //当前页，用于接口传参
var total = ref(0)
var page=ref(1)
const pageSize = 10
var data = ref([])
var tableData=ref([])
const pids = ref([])

const handleSearch = () => {
  const data = {
    staffIds: pids.value || [],
    start: dateValue.value[0],
    end: dateValue.value[1],
    pageNum: currentPage.value,
    pageSize
  }
  const queryString = new URLSearchParams(data).toString(); 
  const url = `/system/check`
  axios({
    url: `${url}?${queryString}`,
    method: 'get',
    // data: JSON.stringify(data)
  }).then(res=>{
      const {code, msg, ...data} = res.data
      if(data?.record){
        const {record, total: tTotal} = data
        total.value = tTotal
        tableData.value = [] //更新前先清空之前的
        // for(let item in record){
        //   console.log(res.data.data[item]);
        //   var oneData = {
        //     checkCount:{
        //       "vestibule":0,
        //       "electric":0,
        //       "store":0,
        //       "tankFarm":0,
        //       "environment":0
        //     }
        //   };
        //   var i = res.data.data[item].contentChecking
        //   oneData.checkCount.vestibule =8-( i['1']+i['2']+i['3']+i['4']+i['5']+i['6']+i['7']+i['8'])
        //   oneData.checkCount.store =3-( i['9']+i['10']+i['11'])
        //   oneData.checkCount.tankFarm =10- i['12']-i['13']-i['14']-i['15']-i['16']-i['17']-i['18']-i['19']-i['20']-i['21']
        //   oneData.checkCount.electric =5- i['22']-i['23']-i['24']-i['25']-i['26']
        //   oneData.checkCount.environment =2- i['27']-i['28']
        //   oneData.pid =  res.data.data[item].pid
        //   oneData.itemDescribe =res.data.data[item].itemDescribe
        //   for(let des in oneData.itemDescribe){
        //     if(oneData.itemDescribe[des] == "")oneData.itemDescribe[des] ="无"
        //   }

        //   tableData.value.push(oneData)

        // }
        tableData.value = record
      }
      else ElMessage.error(msg || '操作失败')
    })
}

// 点击分页条
const handleChangePage = (value)=>{
    // currentPage.value = value
    handleSearch()
    // axios.get('/petrol/getPetrolSafeDailyList?page='+currentPage.value+'&size=10').then(res=>{
    //   if(res.data.code!=0) ElMessage.error(res.data.msg)
    // else{
    //     lastPage.value=res.data.data.lastPage*10
    //     if(res.data.data.data){
    //   tableData.value = [] //更新前先清空之前的
    //   for(let item in res.data.data.data){
    //     var oneData = {
    //       checkCount:{
    //         "vestibule":0,
    //         "electric":0,
    //         "store":0,
    //         "tankFarm":0,
    //         "environment":0
    //       }
    //     };
    //     var i = res.data.data.data[item].contentChecking
    //     oneData.checkCount.vestibule = i['1']+i['2']+i['3']+i['4']+i['5']+i['6']+i['7']+i['8']
    //     oneData.checkCount.store = i['9']+i['10']+i['11']
    //     oneData.checkCount.tankFarm = i['12']+i['13']+i['14']+i['15']+i['16']+i['17']+i['18']+i['19']+i['20']+i['21']
    //     oneData.checkCount.electric = i['22']+i['23']+i['24']+i['25']+i['26']
    //     oneData.checkCount.environment = i['27']+i['28']
    //     oneData.pid =  res.data.data.data[item].pid
    //     oneData.itemDescribe =res.data.data[item].itemDescribe
    //     for(let des in oneData.itemDescribe){
    //       if(oneData.itemDescribe[des] == "")oneData.itemDescribe[des] ="无"
    //     }
    //     oneData.date= res.data.data.data[item].date
    //     tableData.value.push(oneData)

    //   }
    // }}
        
    // })
  }

 //拿表格数据 
function getSafeList(){
  handleSearch()
  // const url = `/system/check?staffIds=${pids.value}&startDate=${dateValue.value[0]}&endDate=${dateValue.value[1]}&pageNum=${currentPage.value}&pageSize=${pageSize}`
  // if(role==2){
    // axios.get(url).then(res=>{
    //   console.log(res.data.data);
    //   if(res.data.data){
    //     tableData.value = [] //更新前先清空之前的
    //     for(let item in res.data.data){
    //       console.log(res.data.data[item]);
    //       var oneData = {
    //         checkCount:{
    //           "vestibule":0,
    //           "electric":0,
    //           "store":0,
    //           "tankFarm":0,
    //           "environment":0
    //         }
    //       };
    //       var i = res.data.data[item].contentChecking
    //       oneData.checkCount.vestibule =8-( i['1']+i['2']+i['3']+i['4']+i['5']+i['6']+i['7']+i['8'])
    //       oneData.checkCount.store =3-( i['9']+i['10']+i['11'])
    //       oneData.checkCount.tankFarm =10- i['12']-i['13']-i['14']-i['15']-i['16']-i['17']-i['18']-i['19']-i['20']-i['21']
    //       oneData.checkCount.electric =5- i['22']-i['23']-i['24']-i['25']-i['26']
    //       oneData.checkCount.environment =2- i['27']-i['28']
    //       oneData.pid =  res.data.data[item].pid
    //       oneData.itemDescribe =res.data.data[item].itemDescribe
    //       for(let des in oneData.itemDescribe){
    //         if(oneData.itemDescribe[des] == "")oneData.itemDescribe[des] ="无"
    //       }

    //       tableData.value.push(oneData)

    //     }
    //   }
    //   else ElMessage.error(res.data.msg)
    // })
  // }
  // else if(role==3){
  // axios.get('/petrol/getPetrolSafeDailyList?page='+currentPage.value+'&size=10').then(res=>{
  //   lastPage.value=res.data.data.lastPage*10
  //   if(res.data.data.data){
  //     tableData.value = [] //更新前先清空之前的
  //     for(let item in res.data.data.data){
  //       var oneData = {
  //         checkCount:{
  //           "vestibule":0,
  //           "electric":0,
  //           "store":0,
  //           "tankFarm":0,
  //           "environment":0
  //         }
  //       };
        
  //       var i = res.data.data.data[item].contentChecking
  //       oneData.checkCount.vestibule =8-( i['1']+i['2']+i['3']+i['4']+i['5']+i['6']+i['7']+i['8'])
  //       oneData.checkCount.store =3-( i['9']+i['10']+i['11'])
  //       oneData.checkCount.tankFarm =10- i['12']-i['13']-i['14']-i['15']-i['16']-i['17']-i['18']-i['19']-i['20']-i['21']
  //       oneData.checkCount.electric =5- i['22']-i['23']-i['24']-i['25']-i['26']
  //       oneData.checkCount.environment =2- i['27']-i['28']
  //       oneData.pid =  res.data.data.data[item].pid

  //       oneData.itemDescribe =res.data.data.data[item].itemDescribe
  //       for(let des in oneData.itemDescribe){
  //         if(oneData.itemDescribe[des] == "")oneData.itemDescribe[des] ="无"
  //       }
  //       oneData.date= res.data.data.data[item].date
  //       tableData.value.push(oneData)

  //     }
  //   }else ElMessage.error(res.data.msg)

  // })
// }
// console.log(tableData.value);
}
onMounted(()=>{
  getSafeList()

})


const value1 = ref('')

function handlePageChange(currentPage)
{
  page=currentPage

}
// function handleDateChange(value){
//   getSafeList()
// }

// function handleStationChange(value){
//   getSafeList()
// }

const stationList = ref([])

const formatter = (_, _c, value) => {
  return !!value ? value : '-'
}

// 表格的异常次数列
const details = ref({})
const columns = ['前庭', '便利店', '油罐区', '电器设备', '环保']
const getAbnormalNum = async (checkId) => {
  const tmp = details.value[checkId]
  if (tmp) {
    return tmp
  }
  const res = await axios.get(`/system/check/remark?checkId=${checkId}`)
  const {code, msg, data} = res.data
  try {
    if (code == 200) {
      details.value[checkId] = data
    } else {
      ElMessage.error(msg)
    }
  } catch (e) {
    ElMessage.error('网络错误')
  }
}
const exportData = async () => {
  try {
   await axios.get('/system/check/export',{
        responseType: 'arraybuffer'
    }).then(res=>{
       download(res.data,res.headers.get('Content-Disposition'))
       ElMessage.success('导出成功')
   })


  } catch (err) {
    ElMessage.error('导出失败')
  }
}
</script>

<template>
  <div class="bodyPagelSL" >
<!--       
        <div class="operaHeader">  

            <MyDatePicker
              v-model="dateValue"
              type="daterange"
              @change="handleDateChange"
              :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
            />
            <el-select
            id="selectStation"
            v-if="role!=3"
            v-model="pids"
            placeholder="选择巡检的加油站"
            style="margin-left: 30px"
            multiple
            size="large"
            @change="handleStationChange"
          >
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          
        </div> -->

        <OperaHeader @submit="handleSearch">
            <MyDatePicker
              v-model="dateValue"
              type="daterange"
              @change="handleDateChange"
              :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
            />
            <StationSelector v-model="pids"></StationSelector>
            <template #footer>
              <el-button size="large" type="primary" @click="exportData">导出表格</el-button>
            </template>
          </OperaHeader>
    
    <div class="tmainBody">
      <!-- 表格 -->
      <el-table stripe :data="tableData" style="width: 100%; margin-top: 20px;">
        <el-table-column prop="deptName" label="加油站名称" align="center" width="100" />
        <el-table-column  prop="createTime" label="日期" align="center" width="100" />
        <el-table-column label="巡检项目不合格数" align="center">

          <el-table-column v-for="(item, index) in columns" :key="item" :prop="`abnormalNum[${index}]`" :label="item" width="40" align="center">
            <template #default="scope">
              <el-popover effect="light" trigger="click" placement="top" width="auto">
              <template #default>
                <div style="white-space: pre-wrap;">{{ details[scope.row.checkId[index]] }}</div>
              </template>
              <template #reference>
                <span style="cursor: pointer" @click="() => getAbnormalNum(scope.row.checkId[index])">{{ scope.row.abnormalNum[index] }}</span>
              </template>
            </el-popover></template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="巡检项目简述" align="center">
          <el-table-column show-overflow-tooltip prop="checkRemark[0]" :formatter="formatter" label="前庭"  width="150" align="center" />  

          <el-table-column show-overflow-tooltip prop="checkRemark[1]" :formatter="formatter" label="便利店"  width="150" align="center" />  

          <el-table-column show-overflow-tooltip prop="checkRemark[2]" :formatter="formatter" label="油罐区"  width="150" align="center" />  

          <el-table-column show-overflow-tooltip prop="checkRemark[3]" :formatter="formatter" label="电器设备"  width="150" align="center" /> 
          
          <el-table-column show-overflow-tooltip prop="checkRemark[4]" :formatter="formatter" label="环保"  width="150" align="center" /> 
          
          
        </el-table-column>
      </el-table>

      <!--    分页 -->
  
          
  
    </div>
    <el-pagination
          style="margin: 20px auto; padding-bottom: 30px;"
            v-model:current-page="currentPage"
            :default-page-size="pageSize"
            background
            :total="total"
            layout="prev, pager, next"
            @current-change="handleChangePage"
          />
  </div>

  

</template>

<style scoped>
.bodyPagelSL {
  /* height: 100%; */
}
.tmainBody {
  width: fit-content;
  background-color: #ffffff;
  /* max-height: 75%; */
  margin: auto;
}
#title{
  margin-top: 10px;
  margin-bottom: 20px;
  color: var(--el-color-primary);
}

.opera-header{
  display: flex
}

.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.el-pagination{
  margin:10px  auto;
  width:fit-content;
}
/*.el-pagination {
  justify-content: right;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 40px;
}*/
.el-row{
  width: fit-content;
  margin:10px auto;

}



/*.el-table th.gutter{*/
/*  display: table-cell!important;*/
/*}*/
.tmainBody >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.tmainBody >>> .el-table tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.tmainBody >>> .el-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}

.el-table__header{
  margin: auto;
}
</style>
